<template>
	<view>
		<view class="bg-white padding">
			<view class="cu-steps">
				<view class="cu-item" :class="index>num?'':'text-blue'" v-for="(item,index) in numList" :key="index">
					<text class="num" :class="index==2?'err':''" :data-index="index + 1"></text> {{item.name}}
				</view>
			</view>
		</view>
		<view class="title">
			<view class="line"></view>
			<view>身份证OCR</view>
		</view>
		<view class="sfz">
			<view class="sfz_left">
				<view class="sfz_img"><image src="../../static/5.png" mode=""></image></view>
				<view>上传车主身份证人像面</view>
				<view class="sfz_img"><image src="../../static/5.png" mode=""></image></view>
				<view>上传车主身份证国徽面</view>
			</view>
			<view class="sfz_right">
				<view>
					<view>姓名：</view>
					<input type="text"/>
				</view>
				<view>
					<view>性别：</view>
					<input type="text"/>
				</view>
				<view>
					<view>民族：</view>
					<input type="text"/>
				</view>
				<view>
					<view>出生日期：</view>
					<input type="text"/>
				</view>
				<view>
					<view>省份证号：</view>
					<input type="text"/>
				</view>
				<view>
					<view>地址：</view>
					<input type="text"/>
				</view>
				<view>
					<view>签发机关：</view>
					<input type="text"/>
				</view>
				<view>
					<view>有效日期：</view>
					<input type="text"/>
				</view>
			</view>
		</view>
		<view class="title">
			<view class="line"></view>
			<view>行驶证OCR</view>
		</view>
		<view class="sfz">
			<view class="sfz_left">
				<view class="sfz_img"><image src="../../static/5.png" mode=""></image></view>
				<view>上传车组行驶证正面</view>
				<view class="sfz_img"><image src="../../static/5.png" mode=""></image></view>
				<view>上传车主行驶证背面</view>
			</view>
			<view class="sfz_right">
				<view>
					<view>品牌车型：</view>
					<input type="text"/>
				</view>
				<view>
					<view>车牌号：</view>
					<input type="text"/>
				</view>
				<view>
					<view>所有人：</view>
					<input type="text"/>
				</view>
				<view>
					<view>注册/发证日期：</view>
					<input type="text"/>
				</view>
				<view>
					<view>使用性质：</view>
					<input type="text"/>
				</view>
				<view>
					<view>住址：</view>
					<input type="text"/>
				</view>
				<view>
					<view>核载人数：</view>
					<input type="text"/>
				</view>
				<view>
					<view>检验有效日期：</view>
					<input type="text"/>
				</view>
			</view>
		</view>
		<view class="title">
			<view class="line"></view>
			<view>上传现场车身照片</view>
		</view>
		<view class="scene">
			<view class="ph">
				<view class="ph_img">
					<image src="../../static/5.png" mode=""></image>
				</view>
				<view class="ph_font">车身照片(1)</view>
			</view>
			<view class="ph">
				<view class="ph_img">
					<image src="../../static/5.png" mode=""></image>
				</view>
				<view class="ph_font">车身照片(2)</view>
			</view>
			<view class="ph">
				<view class="ph_img">
					<image src="../../static/5.png" mode=""></image>
				</view>
				<view class="ph_font">车身照片(3)</view>
			</view>
			<view class="ph">
				<view class="ph_img">
					<image src="../../static/5.png" mode=""></image>
				</view>
				<view class="ph_font">车身照片(4)</view>
			</view>
		</view>
		<view class="site">
			<view class="site_one">
				<image src="../../static/10.png" mode=""></image>
				<view>签到</view>
			</view>
			<view class="site_tow">
				<view>万翔国际商务中心</view>
				<view>福建省厦门市湖里区点前街道万翔国际商务中心</view>
			</view>
			<view class="site_three"><image src="../../static/9.png" mode=""></image></view>
		</view>
		<view class="btn">到场确认</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 0,
				numList: [{
					name: '订单确认'
				}, {
					name: '到场确认'
				}, {
					name: '维修确认'
				}, {
					name: '进站确认'
				}, {
					name: '救援结束'
				},],
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.btn{
		width: calc(100% - 128rpx);
		height: 100rpx;
		margin: 50rpx auto;
		display: flex;
		justify-content: center;
		align-items: center;
		color: rgba(245, 245, 245, 1);
		font-size: 32rpx;
		font-family: Arial;
		border-radius: 12rpx;
		background-color: rgba(2, 128, 255, 1);
		text-align: center;
		box-shadow: 0rpx 4rpx 12rpx 0px rgba(2, 128, 255, 1);
		border: 2rpx solid rgba(255, 255, 255, 0);
	}
	.site_three,.site_three>image{
		width: 46rpx;
		height: 46rpx;
	}
	.site_tow :nth-child(2){
		font-size: 24rpx;
		font-family: Arial;
	}
	.site_tow{
		color: rgba(14, 16, 13, 1);
		font-size: 28rpx;
		font-family: Arial;
	}
	.site_one>image{
		width: 46rpx;
		height: 46rpx;
	}
	.site_one{
		color: rgba(35, 142, 251, 1);
		font-size: 18rpx;
		text-align: left;
		font-family: Arial;
	}
	.site{
		padding: 0 20rpx 32rpx 40rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.ph_img>image{
		width: 60rpx;
		height: 60rpx;
	}
	.ph_img{
		width: 100%;
		height: 160rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 4rpx solid #BBBBBB;
		border-radius: 10rpx;
	}
	.ph_font{
		margin: 20rpx 0;
	}
	.ph{
		width: 40%;
		text-align: center;
		color: rgba(125, 129, 150, 1);
		font-size: 16rpx;
		font-family: Arial;
	}
	.scene{
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		padding: 24rpx 40rpx;
		box-sizing: border-box;
	}
	.sfz_right>view>view{
		width: 152rpx;
		text-align: right;
	}
	.sfz_right>view>input{
		color: rgba(102, 102, 102, 1);
		font-size: 16rpx;
		font-family: Arial;
	}
	.sfz_right>view{
		height: 48rpx;
		border-bottom: 2rpx solid rgba(187, 187, 187, 0.7);
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.sfz_right{
		padding-right: 20rpx;
		box-sizing: border-box;
		color: rgba(102, 102, 102, 1);
		font-size: 16rpx;
		font-family: Arial;
	}
	.sfz_img>image{
		width: 60rpx;
		height: 60rpx;
	}
	.sfz_img{
		width: 240rpx;
		height: 160rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 4rpx solid #BBBBBB;
		border-radius: 10rpx;
	}
	.sfz_left>view{
		margin-bottom: 20rpx;
	}
	.sfz_left{
		color: rgba(125, 129, 150, 1);
		font-size: 16rpx;
		font-family: Arial;
		margin-left: 46rpx;
		margin-right: 44rpx;
	}
	.sfz{
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
	}
	.line{
		width: 0;
		height: 28rpx;
		border: 3rpx solid rgba(0, 138, 245, 1);
		margin: 0 24rpx 0rpx 50rpx;
	}
	.title{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	page{
		background-color: #FFFFFF;
	}
</style>
